@import url( 'https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap' );
@import '~@wordpress/base-styles/breakpoints';
@import '~@wordpress/base-styles/mixins';

.p2-processing-screen {
	box-sizing: border-box;
	margin: 0 auto;
	height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 32px 32px 0;

	@include break-mobile {
		padding: 80px 20px 0;
		max-width: 400px;
	}

	font-family: var( --p2-font-inter );
}

.p2-processing-screen__text {
	font-weight: 700;
	font-size: $font-headline-small;
	line-height: 1.3em;
	margin-top: 88px;
	margin-bottom: 1.5em;

	h2 {
		animation: p2-fade 0.9s ease-in-out, p2-jump 0.8s cubic-bezier( 0.21, 0.19, 0.24, 0.99 );
	}

	p {
		opacity: 0;
		animation: p2-fade 0.9s ease-in-out 0.8s forwards, p2-jump 0.8s cubic-bezier( 0.21, 0.19, 0.24, 0.99 ) 0.8s forwards;
		margin: 0;
	}

	@include break-mobile {
		font-size: $font-headline-medium;
		margin-top: 112px;
	}
}

.p2-processing-screen__spinner {
	width: 66px;
	height: 66px;
	position: relative;
	opacity: 0;
	background-image: url( 'data:image/svg+xml,%3Csvg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="33" cy="33" r="32" stroke="%23354756" stroke-width="2"/%3E%3Cpath d="M1 33C1 15.3269 15.3269 1 33 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A' );
	animation: p2-spin 0.75s linear infinite, p2-fade 0.75s ease-in-out 1.8s forwards;
}

.p2-processing-screen__footer {
	text-align: center;
	margin-top: auto;
	margin-bottom: 35px;
}

.p2-processing-screen__w-logo {
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-bottom: 3px;
	margin-right: 8px;
	vertical-align: middle;
}

.p2-processing-screen__footer-text {
	font-size: 14px;
	line-height: 17px;
}

@keyframes p2-spin {
	from {
		transform: rotate( 0 );
	}

	to {
		transform: rotate( 360deg );
	}
}

@keyframes p2-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes p2-jump {
	from {
		transform: translateY( 20px );
	}
	
	to {
		transform: none;
	}
}
